<template>
    <div :class="$style.container">
        <div :class="$style.category">
            <Category @change="onChangeCategory" />
        </div>
        <div :class="$style.table">
            <div style="padding-left: 15px;font-size: 18px;font-weight: bold">{{ currentCategory ? currentCategory.name : '全部分类' }}</div>
            <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='page' :buttons='buttons'>
                <template #$button>
                    <a-button @click="openImport"><UploadOutlined />导入</a-button>
                    <a-button type="link" size="small" href="./template/应用导入模版.xlsx">导入模版</a-button>
                </template>
                <template #name="{record}">
                    <a-space :size="16">
                        <AppIcon v-if="record.cover" :coverType="record.coverType" :icon="record.cover" :color="record.bccolor" />
                        <div>{{ record.name }}</div>
                    </a-space>
                </template>
                <template #type="{record}">{{ appTypeMap[record.type] }}</template>
                <template #linkType="{record}">{{ linkTypeMap[record.linkType] }}</template>
                <template #url="{record}">
                    <template v-if="record.linkType == 1">{{ record.url }}</template>
                    <template v-if="record.linkType == 2">
                        <a-image v-if="record.qr" :width="80" :src="imageUrl + record.qr"></a-image>
                    </template>
                </template>
                <template #enable='{record}'>
                    <a-tag v-if='record.enable' color='success'>{{$t('enable')}}</a-tag>
                    <a-tag v-else>{{$t('disable')}}</a-tag>
                </template>


                <template #recommend='{record}'>
                    <a-tag v-if='record.recommend' color='success'>{{$t('yes')}}</a-tag>
                    <a-tag v-else>{{$t('no')}}</a-tag>
                </template>

                <template #$action='{record}'>
                    <SetRecommend v-model:recommend="record.recommend" :id="record.id"></SetRecommend>
                </template>
            </BPTable>
        </div>
    </div>

    
    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :row="currentRow" :category="currentCategory && currentCategory.parentId > 0 ? currentCategory.id : 0" ref="formRef" />
    </BDrawer>

    <BDrawer v-model:visible='visibleImport' title='导入' width='600px' :confirm='importSubmit'>
        <ImportForm ref="importformRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { pageApi, deleteApi, appTypeApi, linkTypepeApi, importAppsApi } from '@/api/Apps'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import Edit from './Edit.vue';
    import ImportForm from './ImportForm.vue';
    import Category from './Category/index.vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import AppIcon from "@/components/AppIcon.vue";
import { formatVisitNumber } from '@/utils'
import SetRecommend from './SetRecommend.vue'

    const imageUrl = import.meta.env.B_NET_STATIC_URL

    const i18n = useI18nStore()
    const resourceStore = useResourceStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const tableRef = ref()

    const currentRow = ref<any>()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }

    function page(params) {
        return pageApi({...params, category : currentCategory.value ? currentCategory.value.id : 0, taskApp : false})
    }


    const buttons = ref<SearchButton[]>([])

    buttons.value.push({
        button : 'add',
        func : () => {
            currentRow.value = null
            dialogTitle.value = '新增'
            visible.value = true
        }
    })

    
    const importformRef = ref()
    const visibleImport = ref(false)
    function openImport() {
        visibleImport.value = true
    }
    
    async function importSubmit() {
        const res = await importformRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visibleImport.value = false
            message.success('导入成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }


    const columns = ref<Column[]>([
        {
            title : i18n.t('name'),
            dataIndex : 'name',
            inSearch : true,
        },

        {
            title : "appId",
            dataIndex : 'sourceKey',
            inSearch : true,
        },

        {
            title : "分类",
            dataIndex : 'categoryNames',
            customRender({text}) {
                return text.join("/")
            }
        },

        {
            title : "类型",
            dataIndex : 'type',
        },

        {
            title : '跳转方式',
            dataIndex : 'linkType',
        },

        {
            title : '链接',
            dataIndex : 'url',
            width : 150,
        },

        {
            title : '访问次数',
            dataIndex : 'visitTimes',
            customRender({text}) {
                return formatVisitNumber(text)
            }
            
        },

        {
            title : '访问人次',
            dataIndex : 'visitors',
            customRender({text}) {
                return formatVisitNumber(text)
            }
        },

        {
            title : '访问人数',
            dataIndex : 'uniqueVisitors',
            customRender({text}) {
                return formatVisitNumber(text)
            }
        },

        {
            title : '是否推荐',
            dataIndex : 'recommend',
            inSearch : true,
            type : 'select',
            options : [{label : '是', value : true}, {label : '否', value : false}]
        },

        

        {
            title : '前台显示',
            dataIndex : 'enable',
        },

        {
            title : '排序',
            dataIndex : 'sort',
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
            $edit : (row) => {
                currentRow.value = row
                dialogTitle.value = '修改'
                visible.value = true
            },

            $delete : async (row) => {
                const res = await deleteApi(row.id)
                if(res.success) {
                    message.success(i18n.t('deleteSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            }
        }
    ])


    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            tableRef.value.reload()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }
    
    const appTypeMap = ref<any>({})
    const linkTypeMap = ref<any>({})

    appTypeApi().then(r => {
        r.data.forEach(item => {
            appTypeMap.value[item.code] = item.name
        })
    })

    linkTypepeApi().then(r => {
        r.data.forEach(item => {
            linkTypeMap.value[item.code] = item.name
        })
    })

    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            min-width: 250px;
            
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>